<template>
<div class="box">
	<div class="jfmain clearfix">
		<header>
			<a class="fl logo" href="https://wireai.com/" target="_blank">
				<img :src="`${imgurl}logo_aireai.png`" />
			</a>
			<nav>
				<span class="title" @click="toUrl('/')">
					<i>WIRE AI</i>
				</span>
				<span class="title active" @click="toUrl('/shop')">
					<i>积分商城</i>
				</span>
				<span class="title" @click="toUrl('/member')">
					<i>个人中心</i>
				</span>
				<span class="title" @click="toUrl('/ranklist')">
					<i>积分助力榜</i>
				</span>
			</nav>
		</header>
	    <div class="jfInfo clearfix">
	        <span class="show font1">
	            <img :src="`${imgurl}font1.png`"/>
	        </span>
	        <span class="tit-1">全新福利好礼入驻<i>积分商城焕新上线</i></span>
	    </div>
		<div class="detail">
			<div class="rubric show"><span class="tit" @click="toClass()">{{ info?.classtitle }}</span> > {{ info?.title }}</div>
			
			<el-skeleton :loading="loading" animated v-if="loading">	
				<template #template>
					<div class="content">
					<div class="imgBox">
						<el-skeleton-item variant="image" style="width: 400px; height: 400px" />
						<span class="js show">图片仅供参考，实际兑换礼品请以实物或者您收到的服务为准</span>
					</div>
					<div class="view">
						<el-skeleton-item variant="text" class="tit-1 show"/>
						<el-skeleton-item variant="text" style="width: 30%" class="num show"/>
						<el-skeleton-item variant="text" class="integral"/>
					</div>
				</div>
				</template>
			</el-skeleton>
			
			<div class="content flex clearfix" v-else>
				<div class="imgBox">
					<div class="middle" ref="target">
						<el-image
							style="width: 100%; height: 100%;"
							:src="`${baseurl}${imgList[currIndex]}`"
							:key="`${baseurl}${imgList[currIndex]}`"
							:zoom-rate="1.2"
							fit="cover"
							loading
						/>
						<!-- <img :src="`${baseurl}${imgList[currIndex]}`" alt="" /> -->
						<!-- 正方体蒙层滑块 -->
						<div
							v-show="!isOutside"
							class="layer"
							:style="{ left: `${pos.left}px`, top: `${pos.top}px` }"
						>
						</div>
						<span class="amplify"></span>
					</div>
					<div
						class="large"
						v-show="!isOutside"
						:style="[
							{
							backgroundImage: `url(${baseurl}${imgList[currIndex]})`,
							backgroundPosition: `${bg.x}px ${bg.y}px`,
							},
						]"
						>
					</div>
					<div class="gallery-nav">
						<swiper
							:slidesPerView="6"
							:spaceBetween="6"
							:loop="false"
							:centeredSlides="false"
							:autoplay="false"
							:navigation="navigation"
							:modules="modules"
							class="mySwiper">
							<swiper-slide v-for="(item,i) in imgList" :key="i">
								<div class="imgItem active" @mouseenter="currIndex = i">
									<!-- {{ baseurl }}{{ item }} -->
									<!-- <image class="img" :src="`${baseurl}${item}`" /> -->
									<el-image
										style="width: 100%; height: 100%;"
										:src="`${baseurl}${item}`"
										:key="`${baseurl}${item}`"
										:zoom-rate="1.2"
										fit="cover"
										loading
										class="img"
									/>
								</div>
							</swiper-slide>
						</swiper>
						<div class='prev btn' @click.stop='prevEl'></div>
						<div class='next btn' @click.stop='nextEl'></div>
						<!-- <div class="thumbs">
							<div class="imgList clearfix" :style="gallerysStyle">
								<div class="imgItem active" v-for="(item,i) in imgList" :key="i" @mouseenter="currIndex = i">
									<img class="img" :src="`${baseurl}${item}`"/>
								</div>
							</div>
						</div> -->
					</div>
					
					<span class="js show">图片仅供参考，实际兑换礼品请以实物或者您收到的服务为准</span>
				</div>
				<div class="view">
					<span class="tit-1 show">
						{{ info?.title }}
					</span>
					<span class="tit-2 show">
						{{ info?.content }}
					</span>
					<span class="num show">
						商品编号：{{ info?.itemcode }}
					</span>
					<div class="integral">
						<div class="fl">
							<span class="t">所需积分</span>
							<span class="f26">{{ getArea(info?.score) }}</span>
							<span class="score">积分</span>
						</div>
						<div class="convert">
							累计兑换<br/>
							{{ info?.exchangenum }}+
						</div>
					</div>
					<div class="numCon justify-between">
						<span class="tit show fl">数量</span>
						<div class="compute fl">
							<span class="del" @click="getcartnum(1)"></span>
							<!-- <view class="input">{{ number }}</view> -->
							<input class="input" type="number" v-model="number" @input="getscore"/>
							<span class="add" @click="getcartnum(2)"></span>
							<span class="mark">(当前库存：{{ info?.goodsnum }})</span>
						</div>
					</div>
					<span class="btnAdd flexC" v-if="info?.goodsnum != 0" @click="getExchange">确认兑换<a v-if="score > 0">{{score}}分</a></span>
					<span class="btnAdd flexC disable" v-else>商品暂无库存</span>
				</div>
			</div>
			<div class="rule">
				<span class="tit-1 show">积分兑换规则</span>
				<span class="tit-2 show">用户可以使用积分兑换商城内的商品或服务类奖励，包括但不限于消费卡、生活用品、企业培训等。用户根据需求选择奖励，提交兑换申请，经由平台审核通过后，即兑换成功。客服拨打注册号码联系用户，与用户确认奖励领取方式（邮寄/自取），完成积分兑换服务。</span>
				<span class="tit-1 show">商品详情</span>
			</div>
			<div class="itemcode" v-html="content"></div>
		</div>
	</div>
	<popup v-if="isShow" @close="showpop" :score="score" :title="info.title"></popup>
</div>
</template>

<script lang="ts" setup>
	import { useRouter,useRoute } from 'vue-router';
    import { useUserStore } from "@/store/modules/user";
	import popup from './popup.vue';
	import { getArea } from '../../utils/base.ts';
	import { useSystemStore } from "@/store/modules/system";
	import {Swiper, SwiperSlide} from 'swiper/vue';
	import {Autoplay, Navigation, A11y} from 'swiper';
	// 引入swiper样式，对应css 如果使用less或者css只需要把scss改为对应的即可
	import 'swiper/css';
	import 'swiper/css/navigation';
	import 'swiper/css/pagination';
	const imgurl = import.meta.env.VITE_APP_TITLE+'/assets/images/';
	const imgshop = import.meta.env.VITE_APP_TITLE+'/assets/shop/';
    const userInfo = useUserStore();
	const api = inject('$base', null as any);
    const baseurl = inject('$baseurl', null as any);
	const router = useRouter();
	const route = useRoute();
	const number = ref<number>(0);
	const isShow = ref<boolean>(false);
	const info = ref<any>();
	const imgList = ref<any>([]);
	const currIndex = ref<number>(0);
	const score = ref<number>(0);
	const base = useSystemStore();
	const loading = ref(true);
	const modules = [Autoplay,Navigation, A11y];
	const content = ref('');
	const navigation = ref({
		nextEl: '.next',
		prevEl: '.prev',
	})
	const prevEl = () => {
		// console.log('上一张' + index + item)
	}
	const nextEl = () => {
		// console.log('下一张')
	}
	 /**
     * 放大镜实现:
     * 前置知识：浏览器坐标系从左上角开始(x:0,y:0)
     *
     * 1. 获取元素内鼠标移动的坐标
     * 2. 监听元素内鼠标移动的坐标变化=》控制蒙层移动=》计算蒙层：left和top的值
     * 结论：
     * 1. 蒙层移动的范围： 100< pos <300
     * 2. 蒙层位置计算公式：left = elementX - 100 | top = elementY - 100
     */
	// target 限定鼠标移动范围
    const target = ref(null)
    // 蒙层位置变量
    const pos = ref({ left: 0, top: 0 })
    // 蒙层区域图片放大（2X）
    const bg = ref({ x: 0, y: 0 })
    // elementX, elementY target元素范围内的坐标值
    const { elementX, elementY, isOutside } = useMouseInElement(target)
    watch([elementX, elementY], () => {
      // 横向移动x轴
      if (elementX.value < 100) {
        // 超出置0(左边)
        pos.value.left = 0
      } else if (elementX.value > 300) {
        // 超出置200（右边）
        pos.value.left = 200
      } else {
        pos.value.left = elementX.value - 100
      }
      // 纵向移动y轴
      if (elementY.value < 100) {
        // 超出置0(上)
        pos.value.top = 0
      } else if (elementY.value > 300) {
        // 超出置200（下）
        pos.value.top = 200
      } else {
        pos.value.top = elementY.value - 100
      }

      // 计算背景图放大
      bg.value.x = -pos.value.left * 2
      bg.value.y = -pos.value.top * 2
    })
	
	function showpop(){
		isShow.value = !isShow.value;
	}
	/**
	 * @param 选择购物数量
	 */
	const getcartnum = (type:number)=>{
		console.log(info?.value.goodsnum)
		if(info?.value.goodsnum == 0){
			ElMessage({
				message: '商品暂无库存，不可兑换',
				type: 'error',
			})
			return;
		}
		if(type == 1){
			if(number.value == 0){
				return;
			}
			number.value--;
		}else{
			if(number.value == info.value.goodsnum){
				return;
			}
			number.value++;
		}
		setTimeout(()=>{
			score.value = number.value*info.value.score;
		},500)
	}
	const getscore = ()=>{
		if(number.value < 1 || number.value > info.value.goodsnum){
			score.value = 0;
			return;
		}
		setTimeout(()=>{
			score.value = number.value*info.value.score;
		},1000)
	}
	const blurnum = ()=>{
		if(number.value > info.value.goodsnum){
			ElMessage({
				message: '兑换数量不能大于库存',
				type: 'error',
			})
			return;
		}
		if(number.value < 1){
			ElMessage({
				message: '兑换数量不能小于0',
				type: 'error',
			})
			return;
		}
	}
	function getExchange(){
		if(!number.value){
			ElMessage({
				message: '请输入兑换数量',
				type: 'error',
			})
			return;
		}
		if(number.value < 1 || number.value > info.value.goodsnum){
			ElMessage({
				message: '请输入正确的兑换数量（不能小于0或大于库存）',
				type: 'error',
			})
			return;
		}
		let mark = number.value*info.value.score;
		ElMessageBox.confirm(`该商品兑换需要${mark}积分,确定要兑换该商品吗?`, "温馨提示", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
		}).then(() => {
			let data = {
				id : Number(route.query.id),
				userid : userInfo.userIds,
				num : number.value
			}
			api.exchangegoods(data).then(res=>{
				showpop();
			})
		}).catch(() => ElMessage.info("已取消兑换"));
		
	}
	function toUrl(url){
		router.push({ 
	        path:url
	    })
	}
	function toView(){
	    router.push({ 
	        path:`/view`
	    });
	}
	function toClass(){
		base.productClassid = info.value.class_id
		router.push({ 
	        path:`/shop`,
	    });
	}
	function getView(){
		let data ={
			id : Number(route.query.id)
		};
		api.goodsview(data).then(res=>{
			info.value = res.data.info;
			imgList.value = res.data.info.pic_path.split(',');
			loading.value = false;
			if(res.data.info.introduce){
				content.value = res.data.info.introduce.replace(/<img\s/g, '<img style="max-width:100%;" ');
			}
			
		})
	}
	onMounted(()=>{
		getView();
	})
</script>

<style lang="scss" scoped>
	.box{
		width: 100%;
		background: url(../../assets/images/jfbg2.jpg) no-repeat top center #e9f0fa;
		padding-bottom: 75px;
		font-family: 'siyuanR';
	}
	.jfmain{
		max-width: 1200px;
		width:100%;
		margin: 0 auto;
		position: relative;
		color: #333333;
	}
	header{
		width: 100%;
		padding:0 60px;
		height: 75px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		.logo{
			cursor:pointer;
			display:inline-block;
			height:25px;
		}
		nav{
			padding: 0 15px;
			float:left;
			height:100%;
		}
		.title{
			font-size: 16px;
			padding: 0 15px;
			height: 100%;
			float: left;
			cursor: pointer;
			position: relative;
			i{
				font-style: normal;
				display: inline-block;
				height: 100%;
				position: relative;
				font-family: 'siyuanR';
				color: #666666;
				height: 100%;
				transition: all .5s;
				transform-origin: center;
				align-items: center;
				justify-content: center;
				display: flex;
				&::after{
					position: absolute;
					bottom: 8px;
					content: '';
					left: 50%;
					width: 0;
					height: 4px;
					background-image: linear-gradient(to right,#2379ff, #9cfacd);
					border-radius: 4px;
					transition: all .5s;
				}
			}
			&.active{
				i{
					font-family: 'siyuanM';
					color:#333333;
					&:after{
						width: 100%;
						left: 0;
					}
				}
			}
			&:hover{
				i{
					color: #2379f7;
				}
			}
		}
	}
	.jfInfo{
		width: 100%;
		position: relative;
		padding: 75px 0 0 60px;
		.tit-1{
			font-size: 20px;
			font-family: 'siyuanM';
			line-height: 45px;
			position: relative;
			height: 45px;
			display: inline-block;
			i{
				z-index:10;
				font-style:normal;
				background: linear-gradient(90deg, #2379ff,#0ac1ba); 
				-webkit-background-clip: text; 
				-webkit-text-fill-color: transparent;
				color: transparent;
				font-size:20px;
				margin-left: 5px;
			}
			&::after{
				position: absolute;
				left: 0;
				bottom: 0;
				content: '';
				width: 100%;
				height: 1px;
				background: linear-gradient(to right, #cad2df,#b0c8ef, #b0c8ef); 
			}
			&::before{
				position: absolute;
				left: 0;
				bottom: -3px;
				content: '';
				width: 38px;
				height: 7px;
				background: #8d9299;
				z-index:10;
			}
		}
	}
	.detail{
		width: 100%;
		background: #fff;
		margin-top: 100px;
		position: relative;
		padding: 0 40px;
		border-radius:6px;
		&::after{
			background: url(../../assets/images/bg7.png) no-repeat;
			background-size: 100%;
			width: 134px;
			height: 63px;
			position: absolute;
			left: -37px;
			top:-73px;
			content: '';
		}
		.rubric{
			color: #9094b0;
			font-size: 14px;
			line-height: 65px;
			.tit{
				cursor: pointer;
			}
		}
		.content{
			width: 100%;
			border-bottom: solid 1px #dbe2ee;
			padding-bottom: 20px;
			display: flex;
			justify-content: space-between;
			.view{
				flex:1;
			}
		}
		.imgBox{
			width: 400px;
			margin-right: 30px;
			position: relative;
			.large {
				position: absolute;
				top: 0;
				left: 412px;
				width: 400px;
				height: 400px;
				z-index: 500;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
				background-repeat: no-repeat;
				background-size: 800px 800px;
				background-color: #f8f8f8;
			}
			.middle {
				width: 100%;
				border-radius:8px;
				position: relative;
				height: 400px;
				overflow: hidden;
				.amplify{
					background: url(../../assets/shop/amplify.png) no-repeat;
					background-size: 100%;
					width: 30px;
					height: 30px;
					position: absolute;
					right:15px;
					bottom: 15px;
				}
				img{
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
				.layer {
					width: 200px;
					height: 200px;
					background: rgba(0, 0, 0, 0.2);
					left: 0;
					top: 0;
					position: absolute;
				}
			}
			.gallery-nav{
				width: 100%;
				height: 55px;
				position: relative;
				padding:0 25px;
				margin-top:30px;
				.btn{
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					width:25px;
					height: 100%;
					cursor: pointer;
					z-index:999;
					// &:hover {
					// 	opacity: 0.6;
					// }
					&.swiper-button-disabled{
						opacity: 0.3;
						cursor:default;
					}
				}
				
			}
			.thumbs {
				width: 100%;
				height: 85px;
				overflow: hidden;
			}
			.swiper-slide{
				overflow:hidden;
				border: solid 1px #e1e7f1;
				border-radius: 5px;
				box-sizing: border-box;
				&:hover{
					border: solid 1px #5799f9;
				}
			}
			.imgItem{
				width: 100%;
				height:100%;
				overflow: hidden;
				cursor: pointer;
				
			}
			.js{
				color: #9094b0;
				font-size: 12px;
				line-height: 48px;
			}
		}
		.view{
			width: 100%;
			.tit-1{
				font-size: 18px;
				color: #333333;
				line-height: 28px;
			}
			.tit-2{
				font-size: 14px;
				color: #666;
				line-height: 28px;
			}
			.num{
				color:#9094b0;
				font-size: 14px;
				line-height: 30px;
			}
			.integral{
				width: 100%;
				background: #eff4fc;
				height: 55px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 15px 0 20px 0;
				font-size: 14px;
				color: #9094b0;
				.fl{
					height: 100%;
				}
				span{
					height: 100%;
					line-height: 55px;
					float: left;
				}
				.t{
					padding: 0 12px;
				}
				.f26{
					font-size: 26px;
					color: #2379f7;
					font-family: 'DIN';
					font-weight: bold;
					padding-right: 7px;
					margin-top: -2px;
				}
				.score{
					color: #2379f7;
				}
				.convert{
					font-size: 12px;
					padding: 0 20px 0 15px;
					position: relative;
					&::before{
						position: absolute;
						width: 1px;
						background: #dee3ef;
						content: '';
						left: 0;
						top:50%;
						height: 30px;
						transform: translateY(-50%);
					}
				}
			}
		}
		.numCon{
			height: 28px;
			padding: 0 15px;
			width: 100%;
			.tit{
				font-size: 14px;
				color: #9094b0;
				width: 55px;
				text-align: justify;
				text-align-last: justify;
				line-height: 28px;
				margin-right: 15px;
			}
		}
		.compute{
			height:28px;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.mark{
				margin-left: 10px;
				font-size: 12px;
				color: #999;
			}
			.del,
			.add{
				width:28px;
				height:28px;
				border-radius: 5px;
				cursor: pointer;
			}
			.add{
				background: url(../../assets/shop/plus.png) no-repeat center center #eff4fc;
				background-size: 13px 13px;
			}
			.del{
				background: url(../../assets/shop/minus.png) no-repeat center center;
				background-size: 14px 2px;
			}
			.input{
				width: 56px;
				height: 28px;
				background: none;
				text-align: center;
				line-height: 28px;
				font-size: 14px;
				color: #9094b0;
				font-weight: bold;
				background: #eff4fc;
				margin: 0 3px;
				border-radius: 5px;
				outline:none;
			}
			.input::-webkit-inner-spin-button,
			.input::-webkit-outer-spin-button {
				-webkit-appearance: none;
				margin: 0;
			}

			.input{
				-moz-appearance: textfield; /* Firefox 支持 */
			}
		}
		.btnAdd{
			background: #2379f7;
			color: #fff;
			min-width: 120px;
			width:auto;
			display:inline-block;
			padding:0 20px;
			height: 35px;
			border-radius: 20px;
			margin: 45px 15px;
			line-height:35px;
			text-align:center;
			cursor: pointer;
			&.disable{
				opacity:0.6;
				cursor:default;
			}
			a{
				margin-left:3px;
			}
		}
		.rule{
			width: 100%;
			padding:30px 0 0;
			.tit-1{
				color: #2379f7;
				font-size: 16px;
				line-height: 40px;
				padding-left:10px;
				position: relative;
				font-family:'siyuanM';
				&::before{
					position: absolute;
					left: 0;
					content: '';
					background: #2379f7;
					width: 2px;
					height: 12px;
					top:50%;
					margin-top: -6px;
				}
			}
			.tit-2{
				color: #333333;
				font-size: 14px;
				line-height:28px;
				margin-bottom:15px;
			}
		}
		.itemcode{
			line-height:26px;
			padding:0 0 30px;
			p{
				width:100%;
			}
			img{
				max-width:100%;
				width:auto;
			}
		}
	}
	.itemcode img{
		max-width:100%;
		width:auto;
	}
	.img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	@media (max-width: 768px) {
		.jfInfo{
			padding:50px 0 0 35px;
		}
		.detail{
			padding: 0 20px;
			&::after{
				left: 0;
			}
			.content{
				display: block;
			}
			.imgBox{
				width: 100%;
				margin-right: 0;
				.imgT{
					height: 335px;
				}
			}
			.btnAdd{
				margin: 30px 15px;
			}
		}
		header{
			padding:0 0 0 20px;
			nav{
				padding:0 10px;
			}
			.title{
				padding:0 10px;
				font-size:14px;
			}
		}
	}
	.swiper{
		width:100%;
		position:relative;
		height:100%;
	}
	// ::v-deep .swiper-wrapper{
	// 	width:calc(100% + 6px);
	// 	margin-left:-6px;
	// 	overflow:hidden;
	// }
	.prev{
		left: 0;
		background: url('../../assets/images/left.png') no-repeat #fff center center; 
		background-size: 20px 20px;
		
	}
	.next {
		right: 0;
		background: url('../../assets/images/right.png') no-repeat #fff center center;
		background-size: 20px 20px;
	}
	::v-deep .el-image__placeholder {
		background: url(../../assets/shop/loading.gif) no-repeat 50% 50%;
		background-size: 20%;
		width: 100%;
		height: 100%;
	}
</style>